<template>
  <div>
    <!-- 商品spu轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image,index) in goodsinfo.spuImageItems" :key="index">
        <img :src="image.img">
      </van-swipe-item>
    </van-swipe>
    <!-- 商品spu信息 -->
    <div class="goodsInfo adapt">
      <div class="goodsInfo-left">
        <p class="title">{{goodsinfo.title}}</p>
        <div class="tags-out">
          <van-tag v-for="(item2,index) in goodsinfo.tags" :key="index" type="primary" class="tags">
            {{item2}}
          </van-tag>
        </div>
        <p class="subtitle">{{goodsinfo.description}}</p>
        <p class="price">￥{{goodsinfo.price}}</p>
      </div>
    </div>
    <!-- 底部操作按钮 -->
    <van-goods-action>
      <van-goods-action-icon icon='chat-o' text="客服" color="#ee0a24"/>
      <van-goods-action-icon icon='cart-o' text="购物车" to="/shopcart" :badge="getCount"/>
      <van-goods-action-button class="cartbutton" text="加入购物车" type="warning" @click="$refs.overlayRef.popupShow=true,$refs.overlayRef.buyMode=false"/>
      <van-goods-action-button class="cartbutton" text="立即购买" type="danger" @click="$refs.overlayRef.popupShow=true,$refs.overlayRef.buyMode=true"/>
    </van-goods-action>
    <!-- 当goodsinfo不为空的时候才会渲染这个组件 -->
    <goodsPopup :goodsinfo="goodsinfo" ref="overlayRef"></goodsPopup>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import goodsPopup from "@/components/Popup.vue"
export default {
    name:"Goods",
    data(){
      return{
        goodsinfo:{},//商品Spu信息
      }
    },
    created(){
      this.getSpuDetail();
    },
    methods:{
      getSpuDetail(){
        this.$http.get(`http://localhost:8080/spu/detail/${this.id}`).then(res =>{
          this.goodsinfo=res.data;
          //tags有值，根据$转成数组
          if (this.goodsinfo.tags!==null && this.goodsinfo.tags!=='') {
            this.goodsinfo.tags= this.goodsinfo.tags.split('$');
          }
        })
      }
    },
    computed:{
      ...mapGetters('shopcart',['getCount'])
    },
    props:['id'],
    components:{goodsPopup}
}
</script>

<style scoped>
.goodsInfo{
  margin: 10px 0;
}
.goodsInfo p{
  padding-left: 20px;
  text-align: left;
}
.goodsInfo-left{
  float: left;
  widows: 83%;
}
.cartbutton{
  margin-top: 10px;
}
.subtitle{
  color: rgb(95, 126, 151);
  padding-top: 10xp;
  font-size: 13px;
}
.tags-out{
  text-align: left;
  margin-left: 15px;
}
.tags{
  margin-left: 4px;
}
.price{
  color: rgb(62, 62, 131);
  font-size: 16px;
  padding-top: 10px;
}
</style>